<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/urlconfiguration.js"></script>
		<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
		<style>
			.code {
				background: url(code_bg.jpg);
				font-family: Arial;
				font-style: italic;
				color: blue;
				font-size: 30px;
				border: 0;
				padding: 2px 3px;
				letter-spacing: 3px;
				font-weight: bolder;
				float: left;
				cursor: pointer;
				width: 150px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				vertical-align: middle;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 30%;
			}
			
			.mui-input-row button {
				width: 30%;
				margin-top: -9px;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 66%;
			}
			
			.mui-content-padded {
				margin-top: 30px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="height: 55px;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="margin-top: 15px;"></a>
			<h1 class="mui-title" style="margin-top: 15px;">忘记密码</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>手机号</label>
					<input id='phonenumber' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号" maxlength="11"> 
				</div>
				<div class="mui-input-row" id="password_show" style="display:none ;">
					<label>新密码</label>
					<input type="password" placeholder="输入新密码" class="mui-input-password" id="password">
					<label id="password-erro" class="erro" style="display:none;"></label>
				</div>
				<div class="mui-input-row" id="password2_show" style="display:none ;">
					<label style="width: 34.3%;">确认密码</label>
					<input style="width: 60%;float:left;" type="password" placeholder="请重输密码" class="mui-input-password" id="password_again">
					<label id="password-erro" class="erro" style="display:none;"></label>
				</div>
				<div class="mui-input-row" id="get_code" style="display:none ;">
					<div style="margin-top: 13px;">
						<button class="mui-btn-primary" type="button" id="test1" style="margin-left: 2px;">获取验证码</button>
					</div>
					<div style="margin-left: 35%;margin-top: -35px;">
						<input id='checknumber' type="text" class="mui-input-clear mui-input" placeholder="请输入验证码" maxlength="6" style="width: 70%;">
					</div>

				</div>
				<div onload="createCode()" id="form" style="display: ;margin-left: 5%;">
					<form id="form1" runat="server" onsubmit="validateCode()">
						<div class="mui-input-row">
							<table border="0" cellspacing="2" cellpadding="1" style="margin-top: -10px;">
								<tr>
									<td>
										<a href="#" onclick="createCode()">换一张</a>
									</td>
									<td>
										<div class="code" id="checkCode" style="font-size: 25px;margin-left: 20%;" onclick="createCode()"></div>
									</td>
								</tr>
							</table>
						</div>
						<div class="mui-input-row">
							<table >
								<tr>
									<div style="margin-right: 10px;margin-top: 10px;">验证码</div>
								</tr>
								<tr > 
									<input style="float:left; margin-left: 27%;width: 60%;margin-top: -30px;" type="text" id="inputCode" placeholder="请输入验证码" />
								</tr>
								<tr> 
									<button style="width: 20%; margin-top: -38px; margin-right: 2px;" class="mui-btn-primary mui-pull-right" id="Button1" onclick="validateCode();" type="button" value="确定">确定</button> 
								</tr>
							</table>
						</div>
					</form>
				</div>

			</form>

			<div class="mui-content-padded">
				<button id='reg' style="display: none;" class="mui-btn mui-btn-block mui-btn-primary" onclick="submit()">提交</button>
			</div>
		</div>
		<script type="text/javascript" src="../examples/best-practices/list-to-detail/vue.min.js"></script>
		<script src="../js/mui.min.js"></script>

		<!--//重复密码校验-->
		<script>
			var a;
			var b;
			var c;
			var d;
			var e;
			var code;
			//	信息校验
			$("#phonenumber").blur(function() {
				var regphone = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
				var uphone = $("#phonenumber").val();
				$("#phonenumber").css("background-color", "white");
				if(uphone.length <= 0 || !regphone.test(uphone)) {
					mui.alert("手机号错误！");
					a = 0;
				} else {
					a = 1
				}
			});
			$("#password").blur(function() {
				var upassword = $("#password").val();
				$("#password").css("background-color", "white");
				if(upassword.length < 6 || upassword.length > 12) {
					mui.alert("密码为6到12位！");
					b = 0;
				} else {
					b = 1;
				}
			});
			//password1验证  
			$("#password_again").blur(function() {
				var upassword = $("#password").val();
				var upassword1 = $("#password_again").val();
				$("#password_again").css("background-color", "white");
				if(upassword1 != upassword) {
					mui.alert("两次输入不一致！");
					c = 0;
				} else {
					c = 1;
				}
			});
			$("#checknumber").blur(function() {
				var uchecknumber = $("#checknumber").val();
				$("#checknumber").css("background-color", "white");
				if(uchecknumber != code) {
					d = 0;
					e++;
					if(e == 3) {
						code = null;
						mui.alert("验证码已失效，请重发！");
						e = 0;
					}
				} else {
					d = 1;
				}
			});

			//			验证码发送
			function buttonCountdown($el, msNum, timeFormat) {
				var type = 2;
				var $phonenumber = $('#phonenumber').val();
				if(!(/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test($phonenumber))) {
					mui.alert("请输入正确手机号！");
					return false;
				}
				sendnum($phonenumber, type);
				var text = $el.data("text") || $el.text(),
					timer = 0;
				$el.prop("disabled", true).addClass("disabled")
					.on("bc.clear", function() {
						clearTime();
					});

				(function countdown() {
					var time = showTime(msNum)[timeFormat];
					$el.text("已发送" + time);
					if(msNum <= 0) {
						msNum = 0;
						clearTime();
					} else {
						msNum -= 1000;
						timer = setTimeout(arguments.callee, 1000);
					}
				})();

				function clearTime() {
					clearTimeout(timer);
					$el.prop("disabled", false).removeClass("disabled").text(text);
				}

				function showTime(ms) {
					var d = Math.floor(ms / 1000 / 60 / 60 / 24),
						h = Math.floor(ms / 1000 / 60 / 60 % 24),
						m = Math.floor(ms / 1000 / 60 % 60),
						s = Math.floor(ms / 1000 % 60),
						ss = Math.floor(ms / 1000);

					return {
						d: d + "天",
						h: h + "小时",
						m: m + "分",
						ss: ss + "秒",
						"d:h:m:s": d + "天" + h + "小时" + m + "分" + s + "秒",
						"h:m:s": h + "小时" + m + "分" + s + "秒",
						"m:s": m + "分" + s + "秒"
					};
				}

				return this;
			}
			//验证码发送ajax
			function sendnum($phonenumber, type) {
				var w = plus.nativeUI.showWaiting("正在加载...\n");
				$.ajax({
					contentType: "application/json",
					type: "GET",
					url: url_1 + "sendSms.do?jsoncallback=?",
					data: "phone=" + $phonenumber + "&type=" + type,
					dataType: "json",
					success: function(data) {
						if(data.flag == 1) {
							w.close();
							mui.alert("验证码发送成功！");
							code = data.code;
							mui.alert(code);
						}
						if(data.flag == 0) {
							w.close();
							mui.alert("验证码发送失败！");
						}
					},
					error: function() {
						w.close();
						alert("网络连接出错！");
					}
				});

			}

			//使用演示 显示为 秒
			$("#test1").on("click", function() {
				buttonCountdown($(this), 1000 * 60 * 1, "ss");
			});

			function submit() {
				//获取文本框的值    
				var account1 = document.getElementById("phonenumber").value;
				var account2 = document.getElementById("password").value;
				if(a != 1) {
					mui.alert("手机号错误！");
					return;
				}
				if(c != 1) {
					mui.alert("密码输入错误！");
					return;
				}
				if(b != 1) {
					mui.alert("密码不能为空！");
					return;
				}
				if(d != 1) {
					mui.alert("验证码格式错误！");
					return;
				}
				var w = plus.nativeUI.showWaiting("正在加载...\n");
				$.ajax({
					contentType: "application/json",
					type: "GET",
					url: url_1 + "update_userPassword.do?jsoncallback=?",
					data: "phone=" + account1 + "&password=" + account2,
					dataType: "json",
					success: function(data) {
						if(data.flag == 1) {
							w.close();
							mui.alert("修改成功！");
							window.location.href = "login.html";
						}
						if(data.flag == 2) {
							w.close();
							mui.alert("手机号未注册！修改失败！");
						}
					},
					error: function() {
						w.close();
						alert("网络连接出错！");
					}
				});
			}

			function createCode() {
				code = "";
				var codeLength = 4;
				//验证码的长度 
				var checkCode = document.getElementById("checkCode");
				var codeChars = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
				//所有候选组成验证码的字符，当然也可以用中文的
				for(var i = 0; i < codeLength; i++) {
					var charNum = Math.floor(Math.random() * 52);
					code += codeChars[charNum];
				}
				if(checkCode) {
					checkCode.className = "code";
					checkCode.innerHTML = code;
				}
			}
			window.onload = createCode; //刷新页面自动实现该函数
			function validateCode() {
				var inputCode = document.getElementById("inputCode").value;
				if(inputCode.length <= 0) {
					mui.alert("请输入验证码！");
				} else if(inputCode.toUpperCase() != code.toUpperCase()) {
					mui.alert("验证码输入有误！");
					createCode();
				} else if(a == 1 && inputCode.toUpperCase() == code.toUpperCase()) {
					document.getElementById("form").style.display = "none";
					document.getElementById("get_code").style.display = "";
					document.getElementById("password_show").style.display = "";
					document.getElementById("password2_show").style.display = "";
					document.getElementById("reg").style.display = "";
				} else if(a == 0) {
					mui.alert("手机号错误");
				}
			}
		</script>

	</body>

</html>